<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				width: 602px;
				height: 100px;
				border: solid 1px black;
				box-sizing: border-box;
			}
			ul li{
				list-style: none;
				float: left;
				width: 200px;
				height: 100px;
				border-right: solid 1px black;
				box-sizing: border-box;
				background: lavender;
				font-size: 50px;
			}
			.box{
				width: 600px;
				height: 500px;
			}
			.box div{
				width: 600px;
				height: 500px;
				font-size: 100px;
				color: white;
				text-align: center;
				line-height: 500px;
				display: none;
			}
			.box div:nth-of-type(1){
				background: deeppink;
			}
			.box div:nth-of-type(2){
				background: skyblue;
			}
			.box div:nth-of-type(3){
				background: lawngreen;
			}
		</style>
	</head>
	<body>
		<ul>
			<li style="color: white; background: pink;">one</li>
			<li>two</li>
			<li>three</li>
		</ul>
		<div class="box">
			<div style="display: block;">1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('ul li').click(function(){
			var _index = $(this).index();
			$('.box div').eq(_index).show().siblings().hide();
			$(this).css({'color':'white','background':'pink'}).siblings().css({'color':'','background':''});
		})
	</script>
</html>








